@{
    ViewData["Title"] = "自定义头像";
    Layout = "~/Views/Shared/_ManageFormLayout.cshtml";
}
<link rel="stylesheet" type="text/css" href="~/lib/dropify/dist/css/dropify.min.css" />
<link rel="stylesheet" type="text/css" href="~/lib/cropper/dist/cropper.min.css" />
<div class="mdui-m-t-2"></div>
<form id="form1">
<div class="mdui-container">
    <div class="mdui-row">
        
        <div class="mdui-col-xs-12 mdui-col-sm-3">
            <div class="mdui-p-r-2">
            <div class="">选择图片</div>
            <input type="file" id="inputFileNow" name="inputFileNow" class="dropify" />
            </div>
        </div>

        <div class="mdui-col-xs-12 mdui-col-sm-8 mdui-col-offset-sm-1">
            <div class="">裁剪图片</div>
            <div style="max-height:400px;" class="mdui-m-b-1">
                <img src="~/images/avatars/default.png" id="img1" style="max-width:100%;" />
            </div>

        </div>
        <div class="mdui-col-xs-12 mdui-col-sm-8 mdui-col-offset-sm-4 mdui-clearfix">
            <div class="img-preview" style="float:left;width:128px;height:128px;overflow:hidden;">
            </div>
            <div class="img-preview mdui-m-l-1" style="float:left;width:64px;height:64px;overflow:hidden;">
            </div>
            <div class="img-preview mdui-m-l-1" style="float:left;width:32px;height:32px;overflow:hidden;">
            </div>
            
        </div>
    </div>
</div>
</form>

@section Scripts {
    <script src="~/lib/dropify/dist/js/dropify.min.js"></script>
    <script src="~/lib/cropper/dist/cropper.min.js"></script>
    <script src="~/lib/jquery-cropper/dist/jquery-cropper.min.js"></script>

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script src="~/js/systemmanage/user/customavatar.js?v=@System.Guid.NewGuid().ToString()"></script>
     
}